<template>
    <div>
        <!--列表类型-->
        <div class="breadcrumb">
            <div class="tags-type" v-for="(item,index) in type"
                 :key="index" :class="index===typeIndex?'hoverType':''"
                 @click="changeType(index)"
            >
                <el-badge :value="item.num" v-if="item.num>0" class="item">
                    {{item.name}}
                </el-badge>
                <span v-else>{{item.name}}</span>
            </div>
        </div>
        <!--列表-->
        <div class="blogItem custom-article  fade-in-top" v-for="(item,index) in list" :key="index"
             @click="jumpTo(index)"
             :style="{animationDelay:index*0.1+'s'}">
            <!--<el-row :gutter="20">-->
                <!--<el-col :span="18">-->
                    <!--<div class="custom-article-head ">-->
                        <!--<span>xianghaixiangai</span>-->
                        <!--<span class="font-size-mini">|</span>-->
                        <!--&lt;!&ndash;<span class="nohover-span">6天前</span>&ndash;&gt;-->
                        <!--&lt;!&ndash;<span class="font-size-mini">|</span>&ndash;&gt;-->
                        <!--&lt;!&ndash;<span class="nohover-span">前端</span>&ndash;&gt;-->
                    <!--</div>-->
                <!--</el-col>-->
                <!--&lt;!&ndash;<el-col :span="6" class="border">&ndash;&gt;-->
                <!--&lt;!&ndash;<span>&ndash;&gt;-->
                <!--&lt;!&ndash;类型&ndash;&gt;-->
                <!--&lt;!&ndash;</span>&ndash;&gt;-->
                <!--&lt;!&ndash;</el-col>&ndash;&gt;-->
            <!--</el-row>-->
            <el-row :gutter="20">
                <el-col :span="item.thumb?18:24" class=" article-list-item">

                    <div>
                        <h3 class="article-list-item-title"><a title="" target="_blank"> {{item.title}}</a></h3>
                    </div>

                    <div class="grid-content bg-purple-dark article-list-item-desc">
                        {{item.description}}
                    </div>

                    <div class="postmeta article-list-item-foot" v-if="item">
                        <span class="date">{{changeTime(item.inputtime)}}</span>
                        <span class='tags'><a rel="tag">{{item.flag}}</a></span>
                        <span class="views">{{item.click}} ℃</span>
                    </div>
                </el-col>
                <el-col :span="6" class=" " v-if="item.thumb">
                        <el-image class="article-list-item-thumb" fit="contain" :src="handleUrl(item.thumb)" lazy=""></el-image>
                </el-col>
            </el-row>
        </div>
    </div>

</template>

<script>
    import {changeTime} from '@/utils'
  export default {
    name: 'article-list',
    data () {
      return {
        typeIndex: 0,
        type: [
          {
            name: '推荐',
            type: 0,
            num: 0
          },
          {
            name: '最新',
            type: 1,
            num: 10
          },
          {
            name: '热榜',
            type: 2,
            num: 0

          }
        ]
      }
    },
    props:{
      list:{
        type:Array,
        default:[]
      }
    },
    inject: ['handleUrl'],
    methods: {
      //改变类型
      changeType (e) {
        this.typeIndex = e
      },
      //跳转
      jumpTo(index){
          this.$router.push({name:'article-common',query:{id:this.list[index].id}})
      },
      //时间转换
        changeTime(time){
          return changeTime(time,1);
        }

    }
  }
</script>

<style lang="scss" scoped>
    .breadcrumb {
        margin-top: 10px;
        display: flex;
        cursor: pointer;
        font-size: 1em;
        .tags-type {
            min-width: 4vw;
        }
        .hoverType {
            font-size: 1.25em;
            color: blue;
        }
    }

    .custom-article {
        cursor: pointer;
        .custom-article-head {
            display: flex;
            color: #4e5969;
            span {
                max-width: 5vw;
                text-overflow: ellipsis;
                overflow: hidden;
                white-space: nowrap;
                padding-right: 5px;
            }
            .font-size-mini {
                font-size: 0.5em;
                font-weight: bolder;
                opacity: 0.5;
            }
            .nohover-span {
                color: #86909c;
            }

        }
        .article-list-item {

            display: flex;
            height: 6vw;
            justify-content: space-between;
            flex-direction: column;

            .article-list-item-title,.article-list-item-desc{
                width: 100%;
                text-overflow: ellipsis;
                overflow: hidden;
                white-space: nowrap;
            }
            .article-list-item-desc{


            }
            .article-list-item-foot{
                margin-bottom: 0 !important;
            }

        }
        .article-list-item-thumb{
            height: 6vw;
        }

    }


</style>
